<template>
	<view class="user-container">
		<block v-if="notices.length > 0">
			<view class="listBox flexR-SB-C" v-for="(notice, idx) in notices" :key="idx" :data-item="notice"
				@click="gotoDetail(notice)">
				<view class="cu-item arrow fz28">
					<view class="content padding-tb-sm">
						<view class="flexR-FS-C mb20">
							<i class="iconfont text-green mr20">&#xe62a;</i>
							<view class="text-green" style="width:440rpx">{{notice.title}}</view>
						</view>
						<view class="text-gray text-sm">
							<text class="margin-right-xs">发布时间：</text> {{notice.timeStr}}
						</view>
					</view>
				</view>
				<i class="iconfont text-green mr20">&#xe62d;</i>
			</view>
		</block>
		<block v-else>
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-notification text-grey"></text>
						<text class="text-grey">暂无公告信息</text>
					</view>
					<view class="action">
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				communityId: "",
				notices: [{
						"title": "社区公园举办环保宣传活动",
						"timeStr": "2024-12-16 09:30:00"
					},
					{
						"title": "社区中心举办免费体检活动",
						"timeStr": "2024-12-18 08:00:00"
					},
					{
						"title": "办公楼举行防震演练",
						"timeStr": "2024-12-19 11:45:00"
					},
					{
						"title": "青年志愿者组织清洁城市行动",
						"timeStr": "2024-12-20 07:30:00"
					},
					{
						"title": "老年活动中心举办健康讲座",
						"timeStr": "2024-12-15 15:00:00"
					},
					{
						"title": "体育馆举行公益健身课程",
						"timeStr": "2024-12-21 19:30:00"
					},
					{
						"title": "社区居民共建美化环境活动",
						"timeStr": "2024-12-22 16:00:00"
					}, {
						"title": '停车场举行消防演习',
						"timeStr": '2024-12-15 06:00:00'
					}
				],
				currPageIndex: 0,
				pageSize: 10,
				page: 1,
				loadingStatus: 'loading',
				loadingContentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			};
		},
		methods: {
			gotoDetail: function(_notice) {
				console.log(1);
				uni.navigateTo({
					url: "/sub-menu/notice/detail"
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.user-container {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #F1F1F1;

		/*border: 2rpx solid black;*/
		.listBox {
			padding: 10rpx 20rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			box-shadow: rgba(73, 104, 126, 0.16) 0rpx 28rpx 30rpx 0rpx;
		}
	}

	.notice {
		margin: 10rpx 7rpx;
		padding: 25rpx;
		background-color: #ffffff;
		border-radius: 7rpx;
	}

	.title {
		border-bottom: 1rpx solid #dedede;
		font-weight: 700;
		font-size: 34rpx;
		color: #00AA00;
	}

	.content {
		padding: 15rpx 0;
		color: #7B7B7B;
	}

	.txt {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.footer {
		padding: 15rpx 0;
		font-size: 22rpx;
		color: #ADADAD;
	}
</style>